<template>
  <view class="sign-out-view">
    <view class="tips">
      <h2>
        注销账号:
      </h2>
      <h2>
        {{ phoneNumber }}
      </h2>
    </view>
    <view class="content">
      <h3>
        帐号注销是不可恢复的操作，请你仔细考虑，谨慎操作，操作前务必审慎阅读、充分理解以下内容。如你有任何疑问、意见和建议，可联系客服咨询，荣耀殿堂将给予你必要的协助。
      </h3>
      <p>
        1.帐号成功注销后，你将无法登录、使用该帐号，该帐号的资产、权益、记录等一切内容(包括但不限于以下所列)，将视为你自愿放弃。
      </p>
      <p>
        1.1.该帐号将无法登录和使用，帐号的全部个人资料和历史信息将无法找回。
      </p>
      <p>
        1.2.该帐号下的所有使用记录等都将被清空，无法继续使用且无法恢复
      </p>
      <p>
        1.3.如需再次使用荣耀殿堂App，可重新使用同一个手机号进行注册，系统将生成新的账号信息。
      </p>
      <p>
        2.帐号注销期间，如果该帐号涉及争议纠纷，包括但不限于投诉、举报、诉讼、仲裁、国家机关调查等，荣耀殿堂有权自行终止该帐号的注销且无需你的同意。
      </p>
      <p>
        3.注销帐号的行为并不代表该帐号注销前的帐号行为和相关责任得到任何豁免或减轻。
      </p>

    </view>
  </view>
  <view class="btn-group">
    <view class="btn-apply-sign-out" @click="handleClickApplySignOutBtn">
      申请注销
    </view>
    <view class="btn-think" @click="handleClickThinkBtn">
      我再想想
    </view>
  </view>
</template>
<script setup>
import {inject, ref} from 'vue'
import {onLoad} from "@dcloudio/uni-app";
import {useHiddenIntermediatePhoneNumber} from "@/utils/formatHooks";

const signOutVerificationCode = ref('')
const phoneNumber = ref('')

const packageUserPath = inject('packageUserPath')

/**
 * 监听申请注销按钮点击事件
 */
const handleClickApplySignOutBtn = () => {
  uni.navigateTo({
    url: `${packageUserPath}/sign-out-apply`
  })
}

const handleClickThinkBtn = () => {
  uni.switchTab({
    url: '/pages/user/index'
  })
}

onLoad(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const eventChannel = page.getOpenerEventChannel();
  eventChannel.on('emitSignOutVerificationCode', data => {
    signOutVerificationCode.value = data
  })
  phoneNumber.value = useHiddenIntermediatePhoneNumber(uni.getStorageSync('userPhoneNumber'))
})

</script>
<style scoped lang=less>
.sign-out-view {
  padding: 40rpx;
  font-family: 'ali';
  color: #999;

  .tips {
    display: flex;
    align-items: center;

    h2:first-child {
      color: #333;
    }

    h2:last-child {
      margin-left: 30rpx;
      color: #ec734e;
    }
  }

  .content {
    margin-top: 60rpx;

    p {
      margin-top: 15rpx;
    }

    h3 {
      color: #333;
      font-weight: 700;
    }
  }
}
.btn-group {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 40rpx;
  width: 100%;
  height: 120rpx;
  background-color: #f7f8fd;

  .btn-apply-sign-out,
  .btn-think {
    width: 220rpx;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    color: #fff;
  }

  .btn-apply-sign-out {
    background-color: #eee;
    color: #ec734e;
  }

  .btn-think {
    background-color: #ec734e;
  }
}

</style>
